<template>
  <div class="profile" ref="profile">
    <div class="profileHead">
      <div class="conboxHead">
        <div class="conboxHeadleft">
          <img src="./image/tx.png" class="img1" />
          <p class="text1" v-if="isActive">{{ res.userName }}</p>
          <p class="text1" v-else @click="gotoLogin">点击登录</p>
          <div class="conboxHeadId">
            <img src="./image/mmm.png" class="img2" />
            <p class="text2">我的亲情账号></p>
          </div>
        </div>
        <div class="conboxSet">
          <router-link to="/register" class="a">设置</router-link>
        </div>
      </div>
      <div class="conboxfooter">
        <ul>
          <li>
            <a href="javascript:;:;">
              <p>13</p>
              <p>收藏</p>
            </a>
          </li>
          <li>
            <a href="javascript:;:;">
              <p>1</p>
              <p>关注商品</p>
            </a>
          </li>
          <li>
            <a href="javascript:;:;">
              <p>3</p>
              <p>浏览记录</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="nav">
      <ul class="profilenav">
        <li>
          <a href="javascript:;">
            <span>0</span>
            <span>我的积分</span>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <span>1</span>
            <span>优惠卷</span>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <span>0.00</span>
            <span>订单数量</span>
          </a>
        </li>
        <li>
          <div class="line">
            <a href="javascript:;">
              <span>0.00</span>
              <span>支付订单</span>
            </a>
          </div>
        </li>
        <li>
          <a href="javascript:;">
            <img src="./image/my01.png" />
            <span>消费记录</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="myOrder">
      <div class="orderhead">
        <p>我的订单</p>
        <a href="javascript:;">查看更多订单></a>
      </div>
      <div class="orderSet">
        <ul>
          <li>
            <a href="javascript:;">
              <div class="orderA">
                <img src="./image/my02.png" />
              </div>
              <p>待付款</p>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <div class="orderA">
                <img src="./image/my03.png" />
              </div>
              <p>待发货</p>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <div class="orderA">
                <img src="./image/my04.png" />
                <p>待收货</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <div class="orderA">
                <img src="./image/my05.png" />
              </div>
              <p>待评价</p>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <div class="orderA">
                <img src="./image/my06.png" />
              </div>
              <p>退款/售后</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="myCoupon">
      <div class="couponhead">
        <p>我的优惠卷</p>
        <a href="javascript:;">查看更多订单></a>
      </div>
    </div>
    <div class="myFyeature">
      <ul>
        <li>
          <a href="javascript:;">
            <img src="./image/my11.png" />
            <p>我的活动</p>
          </a>
        </li>
        <li>
          <a href="">
            <img src="./image/my12.png" />
            <p>社区</p>
          </a>
        </li>
        <li>
          <a href="">
            <img src="./image/my13.png" />
            <p>客服服务</p>
          </a>
        </li>
        <li>
          <a href="">
            <img src="./image/my14.png" />
            <p>京东超市</p>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="./image/my7.png" />
            <p>我的优惠卷</p>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="./image/my8.png" />
            <p>收货地址</p>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="./image/my9.png" />
            <p>我的积分</p>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="./image/my10.png" />
            <p>我的客服</p>
          </a>
        </li>
      </ul>
    </div>
    <div class="shopCard">
      <div class="cardHead">
        <p>天猫超市卡</p>
        <a href="">立刻充值></a>
      </div>
      <div class="cardFooter">
        <img src="./image/my00.jpg" />
        <p>账户余额：￥0.00</p>
      </div>
    </div>
    <div class="recommend">
      <div class="recommendNav">
        <img src="./image/my15.png" />
      </div>
      <div class="recommendList">
        <ul>
          <li>
            <a href="">
              <img src="./image/21.png" />
              <p class="p1">三利 毛巾家纺纯棉吸水 提缎面巾两条装</p>
              <p class="p2">
                ￥29.9
                <span>￥49.9</span>
                <img src="./image/f3.png" />
              </p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="./image/21.png" />
              <p class="p1">三利 毛巾家纺纯棉吸水 提缎面巾两条装</p>
              <p class="p2">
                ￥29.9
                <span>￥49.9</span>
                <img src="./image/f3.png" />
              </p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="./image/21.png" />
              <p class="p1">三利 毛巾家纺纯棉吸水 提缎面巾两条装</p>
              <p class="p2">
                ￥29.9
                <span>￥49.9</span>
                <img src="./image/f3.png" />
              </p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="./image/21.png" />
              <p class="p1">三利 毛巾家纺纯棉吸水 提缎面巾两条装</p>
              <p class="p2">
                ￥29.9
                <span>￥49.9</span>
                <img src="./image/f3.png" />
              </p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="./image/21.png" />
              <p class="p1">三利 毛巾家纺纯棉吸水 提缎面巾两条装</p>
              <p class="p2">
                ￥29.9
                <span>￥49.9</span>
                <img src="./image/f3.png" />
              </p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="./image/21.png" />
              <p class="p1">三利 毛巾家纺纯棉吸水 提缎面巾两条装</p>
              <p class="p2">
                ￥29.9
                <span>￥49.9</span>
                <img src="./image/f3.png" />
              </p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="./image/21.png" />
              <p class="p1">三利 毛巾家纺纯棉吸水 提缎面巾两条装</p>
              <p class="p2">
                ￥29.9
                <span>￥49.9</span>
                <img src="./image/f3.png" />
              </p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// import BScroll from '@better-scroll/core'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      isActive: localStorage.getItem('userName'),
    }
  },
  mounted() {
    // this._profileScroll()
    this.$store.dispatch('getLogin')
  },
  methods: {
    // _profileScroll() {
    //   new BScroll(this.$refs.profile, {
    //     click: true,
    //   })
    // },
    gotoLogin() {
      this.$router.push('/login')
    },
  },
  computed: {
    ...mapState(['res']),
  },
}
</script>

<style scoped lang="stylus">
.profile {
  background: #f7f7f7;
  width: 100%;
  overflow: hidden;

  .profileHead {
    background: url('./image/mybg.jpg') repeat-y;
    width: 100%;
    height: 157px;
    background-size: 100%;

    .conboxHead {
      width: 100%;
      height: 50%;

      .conboxHeadleft {
        position: absolute;

        .img1 {
          width: 56px;
          height: 48px;
          margin: 15px 0px 0px 15px;
        }

        .text1 {
          float: right;
          padding: 15px 0px 0px 15px;
          font-size: 20px;
          color: #FFF;
        }
      }

      .conboxHeadId {
        position: absolute;
        top: 40px;
        left: 80px;
        width: 112px;
        height: 21px;
        background: #e5595c;
        border-radius: 5px;

        .img2 {
          position: absolute;
          top: 0;
          left: 0;
          width: 20px;
          height: 20px;
        }

        .text2 {
          position: absolute;
          top: 5px;
          right: 5px;
          display: inline-block;
          font-size: 13px;
          color: #FFF;
        }
      }

      .conboxSet {
        a {
          position: absolute;
          top: 15px;
          right: 15px;
          font-size: 13.6px;
          color: #FFF;
        }
      }
    }

    .conboxfooter {
      width: 100%;
      text-align: center;

      ul {
        width: 100%;
        overflow: hidden;
        display: inline-block;

        li {
          width: 30%;
          float: left;
          display: inline;
          height: 40px;

          p {
            font-size: 13px;
            color: #FFF;
          }
        }
      }
    }
  }

  .nav {
    margin: 0 auto;
    width: 95%;
    height: 74px;
    background: #fff;
    z-index: 10;
    margin-top: -37px;
    border-radius: 10px;
    text-align: center;

    .profilenav {
      width: 95%;
      display: inline-block;
      overflow: hidden;
      padding: 13px 0 13px 0;

      li {
        float: left;
        display: inline;
        width: 20%;
        height: 48px;

        .line {
          border-right: 1px solid red;
        }

        a {
          display: block;

          span {
            display: block;
            font-size: 13px;
            color: #000000;
            width: 100%;
            height: 24px;
            line-height: 24px;
            text-align: center;
          }

          img {
            width: 24px;
            height: 24px;
            margin-bottom: -3px;
          }
        }
      }
    }
  }

  .myOrder {
    background: #fff;
    margin: 0 auto;
    width: 95%;
    height: 105px;
    margin-top: 15px;
    border-radius: 10px;
    text-align: center;

    .orderhead {
      width: 95%;
      height: 33px;
      line-height: 33px;
      margin: 0 auto;
      border-bottom: 1px solid #f7f7f7;

      p {
        float: left;
        color: #000;
        font-size: 13px;
      }

      a {
        float: right;
        color: #666;
        font-size: 13px;
      }
    }

    .orderSet {
      width: 95%;

      ul {
        width: 95%;
        display: inline-block;

        li {
          width: 20%;
          height: 64px;
          float: left;
          text-align: center;

          a {
            display: block;

            .orderA {
              img {
                width: 24px;
                height: 24px;
                margin: 10px 0 10px 0;
              }
            }

            p {
              font-size: 13px;
              color: #666;
            }
          }
        }
      }
    }
  }

  .myCoupon {
    background: #fff;
    margin: 0 auto;
    width: 95%;
    height: 45px;
    margin-top: 10px;
    border-radius: 10px;
    text-align: center;

    .couponhead {
      width: 95%;
      height: 33px;
      line-height: 33px;
      margin: 0 auto;
      border-bottom: 1px solid #f7f7f7;

      p {
        float: left;
        color: #000;
        font-size: 13px;
      }

      a {
        float: right;
        color: #666;
        font-size: 13px;
      }
    }
  }

  .myFyeature {
    border-radius: 10px;
    margin: 0 auto;
    margin-top: 10px;
    background: #fff;
    width: 95%;
    height: 158px;

    ul {
      width: 95%;

      li {
        text-align: center;
        width: 23%;
        height: 72px;
        float: left;
        margin: 10px 0 0 5px;

        a {
          display: block;

          img {
            width: 38px;
            height: 40px;
          }

          p {
            font-size: 13px;
            color: #666;
          }
        }
      }
    }
  }

  .shopCard {
    margin: 0 auto;
    width: 95%;
    height: 135px;
    background: #fff;
    margin-top: 10px;
    border-radius: 10px;

    .cardHead {
      text-align: center;
      width: 95%;
      height: 33px;
      line-height: 33px;
      margin: 0 auto;
      border-bottom: 1px solid #f7f7f7;

      p {
        float: left;
        color: #000;
        font-size: 13px;
      }

      a {
        float: right;
        color: #666;
        font-size: 13px;
      }
    }

    .cardFooter {
      width: 333px;
      height: 99px;
      margin: 0 auto;

      img {
        margin: 5px 0 10px 0;
        width: 95%;
        height: 67px;
      }

      p;
      font-size: 13px;
    }
  }

  .recommend {
    width: 100%;
    height: 1095px;

    .recommendNav {
      width: 100%;
      text-align: center;
    }

    .recommendList {
      width: 92%;
      margin: 0 auto;

      ul {
        display: inline-block;
        overflow: hidden;

        li {
          float: left;
          width: 179px;
          height: 253px;
          overflow: hidden;

          a {
            border: 1px solid #eee;
            display: block;
            padding: 8px;
            overflow: hidden;

            img {
              width: 162px;
              height: 170px;
            }

            .p1 {
              color: #333;
              font-size: 12.5px;
            }

            .p2 {
              color: #FF2150;
              font-size: 14px;

              span {
                color: #999;
                font-size: 12px;
                text-decoration: line-through;
                padding-left: 8px;
              }

              img {
                padding-left: 50px;
                width: 18px;
                height: 16px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
